<template>
		<view class="cu-list menu-avatar">
     <view class="empty" v-if="!list.length">
      <view>
        您输入的关键词暂时还没有信息 
      </view>
      试试换个关键词吧~
     </view>
			<view v-else  class="cu-item" :class="modalName==index?'move-cur':''" v-for="(item,index) in list" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="index">
				<view class="itembox" :class="ismy?'my':''">
					<image class="itemimg" :src="item.img"></image>
					<view class="itemnameprice" @tap='ismy?mygotodetail(index):gotodetail(index)'>
						<view class="wordPress">{{item.name}}</view>
						<view>网商价：<span>￥{{item.price}}</span></view>
					</view>
					<text v-if="!ismy" @tap="check(index,item.name)" :class="checkedname==item.name?'cuIcon-roundcheckfill':'cuIcon-roundadd'" class="text-blue " style="font-size: 25px;line-height: 10vh;"></text>
				</view>
				<view class="move">
					<view v-if='!zujianshoucang.includes(item._id)' class="bg-red" @tap="shoucang(item._id)">收藏</view>
					<view v-else class="bg-gray" @tap="quxiaoshoucang(item._id)">取消收藏</view>
				</view>
			</view>
		</view>
</template>

<script>
	const db=wx.cloud.database()
	const _=db.command
	export default {
		name:"DiyItem",
		props:{
			list:{
				type:Array,
				required:true
			},
			checkedname:{
				type:String,
				required:true
			},
			fenlei:{
				type:String,
				required:false
			},
			fenleilist:{
				type:Array,
				required:false
			},
			ismy:{
				type:Boolean,
				required:false,
				default:false
			}
		},
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				zujianshoucang:getApp().globalData.zujianname,
				shuaxin:false
			};
		},
      
    watch:{    
      fenlei(newValue){
        console.log("监听器：",newValue)
      }   
    },
		methods:{
			// 更改全局userdata-->更改数据库-->更改全局zujianname
			async shoucang(id){
				getApp().globalData.userdata.zujian.push({
					'fenlei':this.fenlei,
					'id':id
				})
				let res=await db.collection('user').where({
							openid:getApp().globalData.userdata.openid
							}).update({
								data:{
									zujian:getApp().globalData.userdata.zujian
								}
							})
				if(res.stats.updated==1){
					getApp().globalData.zujianname.push(id)
				}
			},
			// 更改全局userdata-->更改数据库-->更改全局zujianname
			async quxiaoshoucang(id){
				let arr=getApp().globalData.userdata.zujian.filter(item=>{
					if(item.id!=id){
						return item
					}
				})
				getApp().globalData.userdata.zujian=arr
				let res=await db.collection('user').where({
							openid:getApp().globalData.userdata.openid
							}).update({
								data:{
									zujian:arr
								}
							})
				if(res.stats.updated==1){
					let index=getApp().globalData.zujianname.indexOf(id)
					getApp().globalData.zujianname.splice(index,1)
				}
			},
			gotodetail(index){
        console.log("详细:",index,this.fenlei)
				uni.navigateTo({
					url:'/pages/index/diy/diydetails/diydetails?id='+this.list[index]._id+'&fenlei='+this.fenlei,
				})
			},
			mygotodetail(index){
				uni.navigateTo({
					url:'/pages/index/diy/diydetails/diydetails?id='+this.list[index]._id+'&fenlei='+this.fenleilist[index],
				})
			},
			check(index,name){
				if(this.checkedname==name){
					this.$emit('checkitem','')
				}else{
					this.$emit('checkitem',this.list[index].name)
				}
				
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss">
	.my{
		width: 100vw;
		justify-content: space-around;
	}
.itembox{
	display: flex;
	flex-direction: row;
	
	.wordPress{
overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 
  }
	// border-bottom: 1px solid #F1F1F1;
	.itemimg{
		height: 9vh;
		width: 15vw;
		margin-right: 5vw;
	}
	.itemnameprice{
		width: 45vw;
		height: 9vh;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		span{
			color: red;
		}
	}	
}
.empty{
    margin-top: 10vh;
    line-height: 50upx;
    text-align: center;
    color: #666666;
    font-size:32upx;
}
</style>